<template>
   <div class="main">

     <h1>{{message}}</h1>
     <el-table :data="user" :row-class-name="tableRowClassName">
       <el-table-column prop="uid" label="用户ID" width="100"/>
       <el-table-column prop="uname" label="用户名" width="80"/>
       <el-table-column prop="sex" label="用户性别" width="60"/>
       <el-table-column prop="birthday" :formatter="dateFormat" label="出生日期" width="110"/>
       <el-table-column prop="phone" label="联系电话" width="110"/>

     </el-table>
     <el-pagination
       background
       layout="prev, pager, next"
       @current-change="currPageChange"
       :current-page.sync="currPage"
       :pageSize="pageInfo.pageSize"
       :total="pageInfo.itemCount">
     </el-pagination>
   </div>

</template>
<script>
    import api from "../../../../axios/api.js"
    import * as fecha from "element-ui/lib/utils/date";
    import utilsFD from "../../../../static/js/utils/index.js"
    export default {//default是一个对象，有很多成员变量，其中一个是name 另外一个是data函数（变量名为data，值为返回值的成员变量）
        name: "list",
        data(){//data是一个函数，返回值是一个对象（对象有很多成员变量 就可以定义很多值提供给vue使用）
          return {
            user:[],
            message:'用户信息',
            currPage:1,
            pageInfo:{},
            fechaNew : fecha
          }
        },
        methods:{
          getImgUrl: function (imgsrc) {
            return "../../../static/images/scrolls/" + imgsrc;
          },
          dateFormat(row, column, cellValue) {
            return utilsFD.FD.Fd().dateFormatCN(cellValue,'yyyy-MM-dd',fecha);
          },
          getStudentByPage:function () {
             api.setDataFromAxios("/api/userController/getUserByPage",{"currPage":this.currPage,"pageSize":this.pageInfo.pageSize},"post",null).then(
               //默认返回就是response对象
               dto=>{
                 console.log(dto);
                  this.user = dto.tList;
                  this.pageInfo = dto.obj;
               }
             );
          },
          currPageChange:function () {
            this.getStudentByPage();//当用户选择页码，选中的页码自动同步给currPage，再调用重新分页查询当前页方法
          },
          tableRowClassName({row, rowIndex}) {
            if (rowIndex % 2 == 0) {
              return 'warning-row';
            } else {
              return '';
            }
            return '';
          },
        },
        created() {
           this.getStudentByPage();
        }

    }
</script>

<style scoped lang="stylus">
  .main
   width 1000px
   margin 0 auto
  /deep/ table
          text-align center
          width 700px
          margin 0 auto
/deep/ .warning-row  /*不写deep渲染出错*/
  background-color oldlace
</style>
